<script setup lang="ts">
  import { computed, PropType, ref} from 'vue'
  interface IPerson {
    name: string;
    age: number;
  }
  interface IEvents {
    (e: 'change', hidden: boolean): void 
  }
  const props = withDefaults(defineProps<{user?: IPerson}>(), {
    user: () => ({name : 'viking', age: 30})
  })
  const emit = defineEmits<IEvents>()
  const isHidden = ref(false)
  const doubleAge = computed(()=> props.user.age * 2)
  const toggleHide = () => {
    isHidden.value = !isHidden.value
    emit('change', isHidden.value)
  }
</script>